<template>
  <div>
    <h1>产品记录</h1>
    <!-- ElementPlus 的表格组件 -->
    <el-table :data="products" stripe>
      <el-table-column prop="id" label="记录编号"></el-table-column>
      <el-table-column prop="product_id" label="产品编号"></el-table-column>
      <el-table-column prop="production_date" label="生产日期"></el-table-column>
      <el-table-column prop="quantity" label="生产数量"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="editProduct(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteProduct(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <h2>添加产品记录</h2>
    <!-- ElementPlus 的表单组件 -->
    <el-form :model="newProduct" @submit.prevent="addProduct">
      <el-form-item label="产品编号">
        <el-input v-model="newProduct.product_id" required></el-input>
      </el-form-item>
      <el-form-item label="生产日期">
        <el-date-picker v-model="newProduct.production_date" type="date" required></el-date-picker>
      </el-form-item>
      <el-form-item label="生产数量">
        <el-input-number v-model="newProduct.quantity" required></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">添加</el-button>
      </el-form-item>
    </el-form>
    <h2>编辑产品记录</h2>
    <!-- 编辑产品的表单，初始隐藏 -->
    <el-form v-if="editMode" :model="editedProduct" @submit.prevent="updateProduct">
      <el-form-item label="产品编号">
        <el-input v-model="editedProduct.product_id" required></el-input>
      </el-form-item>
      <el-form-item label="生产日期">
        <el-date-picker v-model="editedProduct.production_date" type="date" required></el-date-picker>
      </el-form-item>
      <el-form-item label="生产数量">
        <el-input-number v-model="editedProduct.quantity" required></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">保存</el-button>
        <el-button size="small" @click="cancelEdit">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

// 存储产品列表的响应式数据
const products = ref([]);
// 用于添加新产品的响应式数据
const newProduct = ref({
  id: '',
  product_id: '',
  production_date: '',
  quantity: 0
});
// 用于编辑产品的响应式数据
const editedProduct = ref({
  id: '',
  product_id: '',
  production_date: '',
  quantity: 0
});
// 编辑模式的标志
const editMode = ref(false);

// 获取产品列表
const fetchProducts = async () => {
  try {
    const response = await axios.get(`/api/productrecords`);
    products.value = response.data;
  } catch (error) {
    console.error('获取产品列表失败:', error);
    alert('获取产品列表失败，请稍后重试');
  }
};

// 添加新产品
const addProduct = async () => {
  try {
    await axios.post(`/api/productrecords`, newProduct.value);
    fetchProducts();
    newProduct.value = {
      id: '',
      product_id: '',
      production_date: '',
      quantity: 0
    };
    alert('产品添加成功');
  } catch (error) {
    console.error('添加产品失败:', error);
    alert('添加产品失败，请稍后重试');
  }
};

// 编辑产品
const editProduct = (product) => {
  editMode.value = true;
  editedProduct.value = {...product };
};

// 取消编辑
const cancelEdit = () => {
  editMode.value = false;
  editedProduct.value = {
    id: '',
    product_id: '',
    production_date: '',
    quantity: 0
  };
};

// 更新产品
const updateProduct = async () => {
  try {
    await axios.put(`/api/products/${editedProduct.value.id}`, editedProduct.value);
    fetchProducts();
    editMode.value = false;
    alert('产品更新成功');
  } catch (error) {
    console.error('更新产品失败:', error);
    alert('更新产品失败，请稍后重试');
  }
};

// 删除产品
const deleteProduct = async (product) => {
  if (window.confirm('确定要删除该产品吗？')) {
    try {
      await axios.delete(`/api/products/${product.id}`);
      fetchProducts();
      alert('产品删除成功');
    } catch (error) {
      console.error('删除产品失败:', error);
      alert('删除产品失败，请稍后重试');
    }
  }
};

// 组件挂载后获取产品列表
fetchProducts();
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
</style>